<template>
  <div>
    <div class="disable" v-if="isShow">
      <input type="text" placeholder="写跟帖" @focus="showTextarea" v-model="content" />
      <div class="likeIcon">
        <span class="iconfont iconpinglun-"></span>
        <span class="count">102</span>
      </div>
      <span class="iconfont iconshoucang"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <div class="enable" v-else-if="!isShow">
      <textarea
        rows="4"
        :placeholder="'回复:' + nickname"
        @blur="hideTextarea"
        ref="textarea"
        v-model="content"
      ></textarea>
      <div class="BtnSend" @click="SendComment">确定</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["postId", "parentId", "nickname"],
  data() {
    return {
      isShow: "true",
      content: ""
    };
  },
  methods: {
    showTextarea() {
      this.isShow = false;
      // 因为js的同步执行代码的，当执行到这里的时候textarea还没有显示出来，所以获取不到textarea这个dom对象，此时我们就要用this.$nextTick()回调函数，等下一个页面更新后再执行
      this.$nextTick(() => {
        this.$refs.textarea.focus();
      });
    },
    hideTextarea() {
      //由于失去焦点，textarea就要先隐藏了,之后的发送按钮就不存在了，也就不会执行发送的点击事件，所以我们要给失去焦点事件添加一个延迟
      setTimeout(() => {
        this.isShow = true;
      }, 50);
    },
    SendComment() {
      console.log("这里是接收文章id", this.postId);
      console.log("这里是接收文章id", this.parentId);
      //发送ajax请求
      this.$axios({
        url: "/post_comment/" + this.postId,
        method: "POST",
        data: {
          content: this.content,
          parent_id: this.parentId
        }
      }).then(res => {
        console.log("这里是发送评论", res.data);
        if (res.data.message == "评论发布成功") {
          //清空textarea的值
          this.content = "";
          //向父组件传递一个事件
          this.$emit("upDateComment");
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.disable {
  display: flex;
  padding: 10px 18px;
  justify-content: space-between;
  background-color: #f7f7f7;
  width: 100%;
  position: fixed;
  bottom: 11.111vw;
  left: 0;
  box-sizing: border-box;
  border-top: 1px solid #eee;
  input {
    width: 180px;
    height: 30px;
    line-height: 30px;
    background-color: #d7d7d7;
    border: 0;
    outline: none;
    border-radius: 15px;
    font-size: 14px;
    text-indent: 2em;
  }
  .likeIcon {
    position: relative;
    .iconpinglun- {
      font-size: 23px;
    }
    .count {
      position: absolute;
      left: 4px;
      top: -4px;
      width: 34px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      background-color: #f00;
      font-size: 10px;
      color: #fff;
      border-radius: 8px;
    }
  }
  .iconshoucang,
  .iconfenxiang {
    font-size: 23px;
  }
}
.enable {
  padding: 10px 18px;
  display: flex;
  align-items: flex-end;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 11.111vw;
  box-sizing: border-box;
  textarea {
    width: 260px;
    height: 90px;
    border-radius: 10px;
    background-color: #d7d7d7;
    border: none;
    padding: 10px;
    font-size: 14px;
  }
  .BtnSend {
    width: 60px;
    height: 26px;
    line-height: 26px;
    background-color: #f00;
    color: #fff;
    border-radius: 13px;
    font-size: 14px;
    text-align: center;
    margin-left: 10px;
  }
}
</style>